import 'package:flutter/material.dart';
import 'package:flutter_demo/utils/MyIcons.dart';

class View4 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new View4State();
  }
}

class View4State extends State<View4> {
  bool _switchChecked = true;
  bool _checkBoxChecked = true;
  GlobalKey _formKey= new GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new RaisedButton(
              child: new Text('RaisedButton'),
              onPressed: () {
                print('RaisedButton');
              },
              colorBrightness: Brightness.dark,
              color: Colors.blue,
              highlightColor: Colors.blue[700],
              shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
            ),
            new FlatButton(
              child: new Text('FlatButton'),
              onPressed: () {
                print('FlatButton');
              }
            ),
            new OutlineButton(
              child: new Text('OutlineButton'),
              onPressed: () {
                print('OutlineButton');
              }
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.thumb_up),
              onPressed: () {
                print('IconButton');
              }
            )
          ],
        ),
        new Icon(MyIcons.camera_line),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Switch(
              value: _switchChecked,
              onChanged: (value) {
                setState(() {
                  _switchChecked = value;
                });
              },
            ),
            new Checkbox(
              value: _checkBoxChecked,
              onChanged: (value) {
                setState(() {
                  _checkBoxChecked = value;
                });
              },
            )
          ],
        ),
        new Container(
          child: new TextField(
            decoration: InputDecoration(
              labelText: 'label',
              hintText: '输入框占位字符',
              prefixIcon: new Icon(Icons.ac_unit),
              border: InputBorder.none// 隐藏TextField默认的下边框，并通过Container灵活自定义下边框
            ),
          ),
          decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey[350], width: 1.0))
          ),
        ),
        new Container(
          child: new TextField(
            decoration: InputDecoration(
              labelText: 'label',
              hintText: '输入框占位字符',
              prefixIcon: new Icon(Icons.ac_unit),
              border: InputBorder.none// 隐藏TextField默认的下边框，并通过Container灵活自定义下边框
            ),
          ),
          decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey[350], width: 1.0))
          ),
        ),
        new Form(
          key: _formKey,
          autovalidate: true,
          child: new Column(
            children: <Widget>[
              new TextFormField(
                validator: (v) {
                  return v.length > 0 ? null : '请输入用户名';
                },
                decoration: InputDecoration(
                  labelText: '用户名'
                ),
              ),
              new TextFormField(
                validator: (v) {
                  return v.length > 0 ? null : '请输入密码';
                },
                decoration: InputDecoration(
                  labelText: '密码'
                ),
              ),
              new Row(
                children: <Widget>[
                  new Expanded(
                    child: new RaisedButton(
                      child: new Text('登录'),
                      color: Theme.of(context).primaryColor,
                      textColor: Colors.white,
                      onPressed: () {
                        if((_formKey.currentState as FormState).validate()){// 通过GlobalKey访问表单实例
                          print('表单验证通过');
                        }
                      },
                    ),
                  )
                ],
              ),
              new Row(
                children: <Widget>[
                  new Expanded(
                    child: Builder(builder: (context) {
                      return new RaisedButton(
                        child: new Text('test btn'),
                        onPressed: () {
                          bool res = Form.of(context).validate();// 通过Form.of访问表单实例，但注意要用Builder方法构建按钮子组件，这样才能获得表单所在组件树的context
                          if(res){
                            print('表单验证通过1');
                          }
                        },
                      );
                    }),
                  )
                ],
              )
            ],
          ),
        )
      ],
    );
  }
}